<template>
	<div class="categories">
		<template v-for="(item, index) in categories" :key="item.id">
			<div class="item">
				<img :src="item.pictureUrl" alt="" />
				<div class="text">{{ item.title }}</div>
			</div>
		</template>
	</div>
</template>

<script setup>
	import useHomeStore from '@/stores/modules/home'
	import { storeToRefs } from 'pinia'

	const homeStore = useHomeStore()
	const { categories } = storeToRefs(homeStore)
</script>

<style lang="less" scoped>
	.categories {
		display: flex;
		overflow: auto;
		height: 80px;
		padding: 0 10px;
		margin-top: 15px;

		// 隐藏滚动条
		&::-webkit-scrollbar {
			display: none;
		}

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 70px;
			// 设置弹性元素宽度没有用,是因为flex-shrink默认值会自动伸缩
			flex-shrink: 0;

			img {
				width: 32px;
				height: 32px;
			}

			.text {
				font-size: 12px;
				margin-top: 8px;
			}
		}
	}
</style>
